<template>
	<div class="tpl43-nav">
    <!-- 滑动分类 -->
    <div class="nav-classify">
      <!-- TODO 小程序使用微信组件滚动 -->
      <wx-scroll-view :scroll-x="canScrollX">
        <ul>
          <li v-for="(item,index) in tplItemData.dataset" :class="[index==0?'cur':'']" :key="index">
            <a @click="openLink(item.link)"><span>{{item.showtitle}}</span></a>
          </li>
        </ul>
      </wx-scroll-view>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
export default Vue.extend({
  name: 'index',
  data() {
    return {
      canScrollX: true
    }
  },
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    },
  },

  created() {

  }
})
</script>

<style lang='scss'>
 @import "src/styles/mixin";
.tpl43-nav{
  .nav-classify{
    white-space: nowrap;
    overflow: hidden;
    background: #fff;
    height: 80px;
    ul{
      display: inline-block;
      white-space: nowrap;
      li{
        display: inline-block;
        margin-right: 10px;
        text-align: center;
        min-width: 150px;
        color: #666;
        a{
          display: block;
          color: #666;
          overflow: hidden;
          span {
            line-height: 40px;
            // margin: 14px 0;
            padding: 20px 0;
            display: inline-block;
            white-space: nowrap;
            max-width: 100px;
            color: #000;
          }
        }
        &.cur{
          a{
            span {
              // color: #fff;
              // font-size: 26px;
              // color: #ff4548;
              // border-bottom: 4px solid #ff4548;
            }
          }
        }
      }
    }
  }
  
}

</style>
